<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七开AI重建 WPS之一 : 仿WPS菜单的导航栏</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
body {
    font-family: Arial, sans-serif;
}
.active {
    background-color: #4CAF50; /* 选中项的背景色，可根据需要调整 */
    color: white; /* 选中项的文字颜色，可根据需要调整 */
}
.navbar {
    background: #333;
    overflow: auto;
    white-space: nowrap;
    position: relative;
}

.menu {
    display: inline-block;
    color: white;
    padding: 14px 20px;
    cursor: pointer;
}

/* 分割线样式调整 */
.menu.right-border {
    position: relative; /* 为了使用绝对定位的伪元素 */
}

.menu.right-border::after {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 使用绝对定位 */
    right: 0; /* 定位到容器的右侧 */
    height: 80%; /* 分割线的高度为容器高度的80% */
    width: 1px; /* 分割线的宽度 */
    background-color: #767373; /* 分割线颜色 */
    top: 10%; /* 顶部偏移，使其垂直居中 */
}

.menu.left-border {
    position: relative; /* 为了使用绝对定位的伪元素 */
}
.menu.left-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: #767373;
}

.menu:hover {
    background-color: #555;
}

.submenu-container {
    display: none;
    background:transparent;
    padding: 1px;
    border: 1px solid #5b5858;
}

.submenu {
    display: none;
    padding: 1px;
  
}

.submenu div {
    margin: 1px;
    display: inline-block;
    background:transparent;
    padding: 3px 1px;
    border-radius: 0px;
}



.button-container {
    position: relative;
    display: inline-block;
}

.button {
    padding: 10px;
    border: 0px solid transparent;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: border 0.3s;
}

.button:hover {
    border-color: #f2f2f2;
    border: 0px solid transparent;
}

.button img {
    width: 20px;
    height: 20px;
}

.button span {
    margin-top: 5px;
}

.icon-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-left: 1px;
    cursor: pointer;
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 4px;
}

.icon-button img {
    width: 16px;
    height: 16px;
    margin-bottom: 1px;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.icon-button span {
    font-size: 8px; /* 设置文字字体大小为8px */
}


.menu-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0px;
  }

  .menu-group .buttons {
    display: flex;
  }


  .menu-item:last-child {
    margin-right: 0;
  }

  .menu-item:hover {
    background-color: #d1d1d1;
  }



  .divider {
    flex: none;
    align-self: stretch; /* 使分割线高度自适应navbar的高度 */
    width: 2px;
    height: 80px;
    border-left: 1px solid #c2c0c0; /* 使用边框作为分割线 */
    margin: 0 1px; /* 两侧的间距 */
  }

  .menu-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中子元素 */
    justify-content: center; /* 垂直居中子元素，如果需要的话 */
    padding: 0 20px;
}

.group-title {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
    width: 100%; /* 确保标题宽度与父容器相同，以便text-align生效 */
}

.menu-item {
    display: flex;
    flex-direction: column; /* 使内容垂直排列 */
    align-items: center; /* 水平居中对齐子元素 */
    justify-content: center; /* 垂直居中对齐子元素，如果有必要的话 */
    padding: 5px 10px; /* 或根据实际情况调整内边距 */
    cursor: pointer;
    background-color: transparent;
    border: none;
    margin-right: 5px; /* 保持原有右边距 */
    transition: background-color 0.3s; /* 保持背景颜色的渐变效果 */
}

.icon {
    width: 24px; /* 或根据实际图标大小进行调整 */
    height: 24px; /* 或根据实际图标大小进行调整 */
    margin-bottom: 5px; /* 在图标和文字之间添加一些间隙 */
}
</style>
</head>
<body>
<div class="navbar">
    <div class="menu right-border" data-target="about">关于蛇年七天用AI</div>
    <div class="icon-button" id="undo">
      <img src="imgs/cancel_w.png" alt="撤销" id="undo">
      
    </div>
    <div class="icon-button" id="redo">
      <img src="imgs/redo_w.png" alt="重做">
      
    </div>
    <div class="menu left-border" data-target="start">数据</div>
    <div class="menu" data-target="table_tools">表格</div>
    <div class="menu" data-target="page">页面</div>
    <div class="menu" data-target="reference">引用</div>
    <div class="menu" data-target="view">视图</div>
    <div class="menu" data-target="tools">工具</div>
</div>
<div class="submenu-container">
    <div class="submenu" id="about">蛇年七天AI: 今天是大年初一，挑战七天重建WPS第1天，用AI模仿WPS菜单</div>
    <div class="submenu" id="start">
        

  

        <div class="container">
            <div class="menu-group" id="group-row-column">
                <div class="buttons">
                    <button class="menu-item" id="draw-table">
                        <img src="imgs/insert_table.png" alt="绘制表格" class="icon">绘制表格
                    </button>
                    <button class="menu-item" id="erase">
                        <img src="imgs/insertr.png" alt="插入行" class="icon">插入行
                    </button>
                    <button class="menu-item" id="delete">
                        <img src="imgs/insertc.png" alt="插入列" class="icon">插入列
                    </button>
                    <button class="menu-item" id="delRow">
                        <img src="imgs/deleteRow.png" alt="删除行" class="icon">删除行
                    </button>
                    <button class="menu-item" id="delCol">
                        <img src="imgs/deleteCol.png" alt="删除列" class="icon">删除列
                    </button>
                </div>
                <div class="group-title">行和列</div>
            </div>
            
            <div class="divider"></div>
            
            <div class="menu-group" id="group-merge-split">
                <div class="buttons">
                    <button class="menu-item" id="merge-cells">
                        <img src="imgs/merge.png" alt="合并单元格" class="icon">合并单元格
                    </button>
                    <button class="menu-item" id="split-table">
                        <img src="imgs/split.png" alt="拆分表格" class="icon">拆分表格
                    </button>
                  
                </div>
                <div class="group-title">合并拆分</div>
            </div>
        </div>


    </div>
    <div class="submenu" id="table_tools">
   

        
        <div class="container">
            <div class="menu-group" id="group-row-column">
                <div class="buttons">
                    <button class="menu-item" id="draw-table">
                        <img src="imgs/insert_table.png" alt="绘制表格" class="icon">绘制表格
                    </button>
                    <button class="menu-item" id="erase">
                        <img src="imgs/insertr.png" alt="插入行" class="icon">插入行
                    </button>
                    <button class="menu-item" id="delete">
                        <img src="imgs/insertc.png" alt="插入列" class="icon">插入列
                    </button>
                    <button class="menu-item" id="delRow">
                        <img src="imgs/deleteRow.png" alt="删除行" class="icon">删除行
                    </button>
                    <button class="menu-item" id="delCol">
                        <img src="imgs/deleteCol.png" alt="删除列" class="icon">删除列
                    </button>
                </div>
                <div class="group-title">行和列</div>
            </div>
            
            <div class="divider"></div>
            
            <div class="menu-group" id="group-merge-split">
                <div class="buttons">
                    <button class="menu-item" id="merge-cells">
                        <img src="imgs/merge.png" alt="合并单元格" class="icon">合并单元格
                    </button>
                    <button class="menu-item" id="split-table">
                        <img src="imgs/split.png" alt="拆分表格" class="icon">拆分表格
                    </button>
                  
                </div>
                <div class="group-title">合并拆分</div>
            </div>
        </div>
   
         
    </div>
    <div class="submenu" id="page">页面设置 结构 页眉页脚</div>
    <div class="submenu" id="reference">目录 素引</div>
    <div class="submenu" id="view">视图 显示 比例</div>
    <div class="submenu" id="tools">开发工具 数据库</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

 	

    $(".menu").click(function(){
        
        // 移除所有菜单项的.active类
          $(".menu").removeClass("active");
        // 为当前被点击的菜单项添加.active类
        $(this).addClass("active");

        
        var targetSelector = "#" + $(this).attr("data-target");
        var targetId = $(this).attr("data-target"); // 获取ID或类的名称
    	$(".submenu").hide(); // 隐藏所有子菜单
        $("#" + targetId).toggle(); // 直接使用ID选择器
        $(".submenu-container").show();


    });



        // 默认显示“开始”菜单的二级菜单，同时为其添加.active类高亮显示
    var insertMenu = $("#table_tools");
    insertMenu.show();
    $(".submenu-container").show(); // 确保容器是可见的	
	$("[data-target='insert']").addClass("active"); // 高亮“开始”菜单项





});
</script>

</body>
</html>
